<template>
	<view class="wrap">

		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/29.png" mode=""></image>
		<view class="header">
			<image class="photo" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/27.png" mode="widthFix"></image>
			<view class="nameBox">
				<view class="names">
					深海的鱼
				</view>
				<view class="desc">
					18192496930
				</view>
			</view>
		</view>
		<view class="overview">
			<view class="top">
				<view class="num">
					89.66
					<text>元</text>
				</view>

			</view>
			<view class="tips">
				当前可提现
			</view>
			<view class="bot">
				<view class="left">
					<view class="num2">
						365.82
					</view>
					<view class="desc1">
						总收益
					</view>
				</view>
				<image @click="nav('/pages/sys/user/cash')" class="right" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/18.png" mode="widthFix">
				</image>

			</view>
		</view>
		<view class="handle">
			<view class="item" @click="nav(item.url)" :key="index" v-for="(item,index) in list">
				<view class="left">
					<image class="icon" :src="item.icon" mode="widthFix">
					</image>
					{{item.name}}
				</view>

				<view class="right">
					{{item.desc}}
					<image class="more" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/28.png" mode="widthFix">
					</image>

				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {

		data() {
			return {
				list: [{
					name: '绑定电话',
					desc: '已绑定',
					url: '/pages/sys/user/about',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/22.png'
				}, {
					name: '联系客服',
					desc: '',
					url: '/pages/sys/user/comment',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/23.png'
				},{
					name: '商务合作',
					desc: '欢迎致电 400-12344',
					url: '/pages/sys/user/collaborate',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/26.png'
				}, 
				
				// {
				// 	name: '用户协议',
				// 	desc: '已签署',
				// 	icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/24.png'
				// }, {
				// 	name: '设置',
				// 	desc: '',
				// 	url: '/pages/sys/user/setting',
				// 	icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/25.png'
				// },
				]
			};
		},
		onLoad() {

		},
		methods: {
			nav(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.wrap {
		// width: 100%;
		// height: 100vh;
		// overflow-y: auto;
		// background-image: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/29.png");
		// background-size: cover;
		// background-repeat: no-repeat;
		// background-attachment: fixed;

		.header {
			display: flex;
			align-items: center;
			padding: 110rpx 32rpx 34rpx;

			.photo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 28rpx;
			}

			.nameBox {
				flex: 1;

				.names {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 38rpx;
					margin-bottom: 9rpx;
				}

				.desc {
					// width: 260rpx;
					// height: 34rpx;
					// background-image: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/19.png");
					// background-size: 100% 100%;

					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A95100;
					line-height: 34rpx;
					// line-height: 22rpx;
					// padding-left: 30rpx;
					display: flex;

					text {
						font-size: 20rpx;
						transform: scale(0.9);
					}

				}
			}
		}

		.overview {
			padding: 33rpx 49rpx 39rpx;
			margin: 0 32rpx;
			// width: 686rpx;
			height: 314rpx;
			background-image: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/20.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.top {
				display: flex;
				align-items: center;

				.num {
					font-size: 55rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					line-height: 64rpx;
					text-shadow: 0px 12px 11px rgba(152, 116, 255, 0.25);
					background: linear-gradient(180deg, #FFFFFF 0%, #E5EDFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

					text {
						font-size: 22rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
						line-height: 26rpx;
						margin-left: 12rpx;
					}
				}

			}

			.tips {
				font-size: 26rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 30rpx;
			}

			.bot {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					.num2 {
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						line-height: 42rpx;
						text-shadow: 0px 12px 11px rgba(152, 116, 255, 0.25);
						background: linear-gradient(180deg, #FFFFFF 0%, #E5EDFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					.desc1 {
						font-size: 26rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
						line-height: 30rpx;
					}
				}

				.right {
					width: 208rpx;
					height: 74rpx;
				}

			}
		}

		.handle {
			padding: 79rpx 51rpx;

			.item {
				margin-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 30rpx;
					}

					font-size: 28rpx;
					font-family: PingFang SC-Regular,
					PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;

					.more {
						width: 14rpx;
						height: 7rpx;
						margin-left: 18rpx;
					}
				}
			}
		}
	}
</style>
